<!-- -->
<template>
  <div class='seracBox'>
    <el-autocomplete
        v-model="hospital"
        :fetch-suggestions="querySearch"
        :trigger-on-focus="false"
        clearable
        class="searchContainer"
        placeholder="请输入医院名称..."
        @select="handleSelect"
      />
    <el-button @click='searchClick' :icon="Search" type='primary'>搜素</el-button>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'
import {Search} from '@element-plus/icons-vue'

import { reqHospitalInfo } from '@/api/path'

import router from '@/router';

let props = defineProps(['hasHospitalArr'])

let hospital = ref('')

const querySearch = async (queryString: string, cb: any) => {
  const results = await reqHospitalInfo(queryString)
  // results.data.forEach((item: any) => {
  //   item.value = item.hosname
  // })

  let data = results.data.map((item: any) => {
    return {
      value: item.hosname,
      hoscode:item.hoscode
    }
  })
  
  cb(data)
}

const handleSelect = (item: any) => {
  console.log(item)
  router.push({
    name: 'Register',
    // path: '/hospitalDetail/register',
    query: {
      hoscode: item.hoscode,
    }
  })
}

const $emit = defineEmits(['update:searchHospital'])

const searchClick = () => {
  $emit('update:searchHospital', hospital.value)
}
onMounted(() => {
  
})


</script>

<style lang='scss' scoped>
.seracBox {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  margin: 30px 0;
  :deep(.el-autocomplete) {
    width: 500px;
    margin-right: 20px;
  }
}
</style>
